import React from 'react';
import { Dispatch } from 'redux';
import { connect } from 'dva';
import { router } from 'umi';

import _ from 'lodash';

import { Form } from '@ant-design/compatible';
import { FormComponentProps } from '@ant-design/compatible/es/form';
import PageHeader from '@/components/PageHeader';

import {
  Card,
  Descriptions,
  message,
  Modal,
} from 'antd';

import '@ant-design/compatible/assets/index.css';

const img = 'https://tpc.googlesyndication.com/icore_images/7514387896597764588';

interface TableProps extends FormComponentProps {
  dispatch: Dispatch;
  location: { query: any };
  detail: any;
}

interface TableState {
  imgVisible: boolean;
  showImgSrc: string;
}

@connect(({
  tookManagementDetail: { detail },
}: any) => ({
  detail,
}))

class TookManagementElem extends React.Component<TableProps, TableState> {
  state: TableState = {
    imgVisible: false,
    showImgSrc: '',
  }

  componentDidMount() {
    this.fetchDetail();
  }

  fetchDetail = () => {
    const {
      dispatch,
      location: { query: { orderId } },
    } = this.props;
    if (orderId) {
      dispatch({
        type: 'tookManagementDetail/fetch',
        payload: { orderId },
      });
    } else {
      message.error('当前信息不存在');
      router.goBack();
    }
  }

  renderBasicElem = (detail: any) => (
    <Descriptions bordered size="small">
      <Descriptions.Item label="运单号">{detail.expCode}</Descriptions.Item>
      <Descriptions.Item label="订单号">{detail.orderNum}</Descriptions.Item>
      <Descriptions.Item label="寄件方式">{detail.typeName}</Descriptions.Item>

      <Descriptions.Item label="寄件人实名">{detail.isIdAuthedDesc}</Descriptions.Item>
      <Descriptions.Item label="物流中心">{detail.logisName}</Descriptions.Item>
      <Descriptions.Item label="付款方式">{detail.paySideDesc}</Descriptions.Item>

      <Descriptions.Item label="快递公司">{detail.expressName}</Descriptions.Item>
      <Descriptions.Item label="派件方式">{detail.sendWayName}</Descriptions.Item>
      <Descriptions.Item label="付款渠道">{Number(detail.shouldFee) === 0 ? '--' : detail.chargeStatusName}</Descriptions.Item>

      <Descriptions.Item label="订单状态">{detail.statusName}</Descriptions.Item>
      <Descriptions.Item label="寄件人姓名">{detail.senderName}</Descriptions.Item>
      <Descriptions.Item label="寄件人手机号">{detail.senderPhone}</Descriptions.Item>

      <Descriptions.Item label="寄件人地址">{detail.senderAddress}</Descriptions.Item>
      <Descriptions.Item label="收件人姓名">{detail.consigneeName}</Descriptions.Item>
      <Descriptions.Item label="收件人手机号">{detail.consigneePhone}</Descriptions.Item>

      <Descriptions.Item label="收件人地址">{detail.consigneeAddress}</Descriptions.Item>
      <Descriptions.Item label="操作人">{detail.operUser}</Descriptions.Item>
      <Descriptions.Item label="操作人手机号">{detail.operPhone}</Descriptions.Item>

      <Descriptions.Item label="物品类型">{detail.pkgType}</Descriptions.Item>
      <Descriptions.Item label="包裹重量">{detail.weight}KG</Descriptions.Item>
      <Descriptions.Item label="订单备注">{detail.remark}</Descriptions.Item>

      <Descriptions.Item label="取消原因">{detail.reason}</Descriptions.Item>
      <Descriptions.Item label="调价原因">{detail.couponRemark}</Descriptions.Item>
    </Descriptions>
  )

  renderCostDetail = (detail: any) => (
    <Descriptions bordered size="small">
      <Descriptions.Item label="包裹重量">{detail.weight}KG</Descriptions.Item>
      <Descriptions.Item label="总费用">
        {(Number(detail.expressFee)
          + Number(detail.packageFee)
          + Number(detail.insureFee)
        ).toFixed(2)}元
      </Descriptions.Item>
      <Descriptions.Item label="保价金额">{detail.evaluation}元</Descriptions.Item>

      <Descriptions.Item label="包装费用">{detail.packageFee}元</Descriptions.Item>
      <Descriptions.Item label="应付金额">{detail.shouldFee}元</Descriptions.Item>
      <Descriptions.Item label="保价利润">{detail.insureProfit}元</Descriptions.Item>

      <Descriptions.Item label="保价费用">{detail.insureFee}元</Descriptions.Item>
      <Descriptions.Item label="寄件券">{detail.couponPayAmount}元</Descriptions.Item>
      <Descriptions.Item label="快递利润">{detail.expressProfit}元</Descriptions.Item>

      <Descriptions.Item label="快递费用">{detail.expressFee}元</Descriptions.Item>
      <Descriptions.Item label="实付金额">{detail.realFee}元</Descriptions.Item>
      <Descriptions.Item label="面单费用">{detail.expPageFee}元</Descriptions.Item>
    </Descriptions>
  )

  renderOrderPrice = (detail: any) => (
    <Descriptions column={1}>
      <Descriptions.Item label="用户评价">{detail.expCode}</Descriptions.Item>
      <Descriptions.Item>
        <img src={img} alt="" className="marginR16" style={{ width: 120 }} />
        <img src={img} alt="" className="marginR16" style={{ width: 120 }} />
        <img src={img} alt="" className="marginR16" style={{ width: 120 }} />
      </Descriptions.Item>
      <Descriptions.Item>2020年03月02日17:25:53</Descriptions.Item>
      <Descriptions.Item label="客服反馈">这是反馈内容</Descriptions.Item>
      <Descriptions.Item>2020年03月02日17:25:53</Descriptions.Item>
    </Descriptions>
  )

  renderOperationLogs = ({ logList = [] }: any) => (
    <>
      {logList.map((item: any) => (
        <div className="marginB8" key={item.id} style={{ display: 'flex' }}>
          {item.time} {item.remark}
          {item.extra && (
            <span
              style={{
                cursor: 'pointer',
                color: '#1890FF',
                marginLeft: 12,
              }}
              onClick={() => this.setState({ imgVisible: true, showImgSrc: item.extra.split('img_url__')[1] })}
            >查看图片
            </span>
          )}
        </div>
      ))}
    </>
  )

  render() {
    const { imgVisible, showImgSrc } = this.state;
    const { detail } = this.props;

    return (
      <>
        <PageHeader />
        <Card bordered={false} title="订单信息">
          {this.renderBasicElem(detail)}
        </Card>
        <Card bordered={false} title="费用详情">
          {this.renderCostDetail(detail)}
        </Card>
        {/* <Card bordered={false} title="订单评价">
          {this.renderOrderPrice(detail)}
        </Card> */}
        <Card bordered={false} title="操作日志">
          {this.renderOperationLogs(detail)}
        </Card>
        <Modal
          visible={imgVisible}
          footer={false}
          destroyOnClose
          onCancel={() => this.setState({ imgVisible: false, showImgSrc: '' })}
        >
          <img src={showImgSrc} alt="" />
        </Modal>
      </>
    );
  }
}

export default Form.create<TableProps>()(TookManagementElem);
